package com.ikapp.jetpackcomposeuidemo.weiget

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import java.lang.reflect.Modifier

/**
 *  ANDROID STUDIO - VERSION 22
 *  createTime: 2024/1/12 22:50
 *  Author: Ikun
 *  email: jikunwei41@gmail.com
 *
 *  Flow Layout 包括 FlowRow 和 FlowColumn ，当一行（或一列）放不下里面的内容时，
 *  会自动换行。这些流式布局还允许使用权重进行动态调整大小，以将项目分配到容器中。
 **/
val list = listOf<String>(
    "Tom", "kk", "lm", "kk love lm!", "Tom", "kk", "lm", "kk love lm!"
)


@Composable
@Preview
fun show() {
    flowLayout()
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun flowLayout(modifier: Modifier = Modifier()) {
    FlowRow(
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        list.forEach { it ->
            var selected by remember { mutableStateOf(false) }
            val leadingIcon: @Composable () -> Unit = {
                Icon(Icons.Default.Favorite, contentDescription = null)
            }
            FilterChip(
                selected = selected,
                onClick = {
                    selected = !selected
                },
                label = { Text(text = it) },
                leadingIcon = if (selected) leadingIcon else null
            )
        }
    }
}

















